<template>
	<Nav class="f" bgColor="#fff">
		<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
			<view class="icon dispaly-align-center">
				<image src="/static/icon/left.png" mode="aspectFill"></image>
				<u-icon name="arrow-left" color="#fff" size="34"></u-icon>
			</view>
			<view class="r-name">师傅详情</view>
		</view>
	</Nav>
	<view :style="{marginTop: navHeiht+ 'px'}">
		<view class="content p-32">
			<view class="dispaly top">
				<view class="user">
					<view class="avatar">
						<image
							src="https://img2.baidu.com/it/u=3853345508,384760633&amp;fm=253&amp;app=120&amp;size=w931&amp;n=0&amp;f=JPEG&amp;fmt=auto?sec=1689958800&amp;t=210689b7eb06d7c78958d7063151cba6"
							mode="aspectFill"></image>
					</view>
				</view>
				<view class="desc">
					<view class="desc-top dispaly-center">
						<view class="name">刘子</view>
						<view class="lv">高级服装师</view>
					</view>
					<view class="order-left dispaly-center">
						<view class="o-title">服务订单</view>
						<view class="num">216单</view>
					</view>
					<view class="detail">西服定制量身定做高级手工商务休 闲套装西服定制量身定做高级闲套装西服定制量身定做高级闲套装西服定制量身定做高级</view>
				</view>
			</view>
			<view class="case">
				<Waterfall title="案例展示" :showUser="false" />
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getElementHeight
	} from '@/utils/util'
	import Waterfall from '@/compoment/waterfall/waterfall.vue'

	// 获取元素高度
	const navHeiht = ref(0)
	onMounted(async () => {
		const res = await getElementHeight('.f')
		navHeiht.value = res
	})
</script>

<style lang="scss" scoped>
	.home-content {
		margin: 0 32rpx;
	}

	.r-name {
		color: #020121;
	}

	.common {
		padding: 32rpx 24rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.title {
		.icon {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.bg {
		background: linear-gradient(180deg, #020121 0%, rgba(2, 1, 33, 0) 100%);
		height: 378rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}

	.content {
		.top {
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.user {
				.avatar {
					margin-right: 16rpx;

					image {
						width: 200rpx;
						height: 160rpx;
						border-radius: 20rpx;
					}
				}
			}

			.desc {
				.desc-top {
					.name {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 500;
						font-size: 32rpx;
						color: #020121;
						margin-right: 10rpx;
					}

					.lv {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						padding: 6rpx 10rpx;
						background: #020121;
						border-radius: 8rpx;
					}
				}

				.order-left {
					margin: 10rpx 0;

					.o-title {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 28rpx;
						color: #7B7B89;
						margin-right: 24rpx;
					}

					.num {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 500;
						font-size: 28rpx;
						color: #020121;
					}
				}

				.detail {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #7B7B89;
					line-height: 40rpx;
				}
			}
		}
	}
</style>